<template>
    <div>
        <div class="font-mono bg-gray-400">
            <!-- Container -->
            <div class="container mx-auto">
                <div class="flex justify-center px-6 my-12">
                    <!-- Row -->
                    <div class="w-full xl:w-3/4 lg:w-11/12 flex">
                        <!-- Col -->
                        <div
                            class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12 bg-cover rounded-l-lg"
                            style="background-image: url('/static/images/show.jfif');">
                            >
                        </div>
                        <!-- Col -->
                        <div class="w-full lg:w-7/12 bg-white p-5 rounded-lg lg:rounded-l-none">
                            <h3 class="pt-4 text-2xl text-center">创建 账户</h3>
                            <form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
                                <div class="mb-4 ">
                                    <label class="block mb-2 text-sm font-bold text-gray-700">
                                        用户名
                                    </label>
                                    <input
                                        v-model="form.name"
                                        class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                        type="text"
                                        name="name"
                                        placeholder="用户名"
                                    />
                                </div>
                                <div class="mb-4 ">
                                    <label class="block mb-2 text-sm font-bold text-gray-700">
                                        手机号
                                    </label>
                                    <input
                                        v-model="form.mobile"
                                        class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                        type="text"
                                        name="mobile"
                                        placeholder="手机号"
                                    />
                                </div>
                                <div class="mb-4">
                                    <label class="block mb-2 text-sm font-bold text-gray-700">
                                        邮箱
                                    </label>
                                    <input
                                        v-model="form.email"
                                        class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                        name="email"
                                        placeholder="Email"
                                    />
                                </div>
                                <div class="mb-4 md:flex md:justify-between">
                                    <div class="mb-4 md:mr-2 md:mb-0">
                                        <label class="block mb-2 text-sm font-bold text-gray-700" for="password">
                                            密码
                                        </label>
                                        <input
                                            v-model="form.password"
                                            class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border border-red-500 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                            id="password"
                                            type="password"
                                            placeholder="******************"
                                        />
                                        <p class="text-xs italic text-red-500"></p>
                                    </div>
                                    <div class="md:ml-2">
                                        <label class="block mb-2 text-sm font-bold text-gray-700" for="c_password">
                                            确认密码
                                        </label>
                                        <input
                                            v-model="form.password_confirmation"
                                            class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                            id="c_password"
                                            name="password_confirmation"
                                            type="password"
                                            placeholder="******************"
                                        />
                                    </div>
                                </div>
                                <div class="mb-6 text-center">
                                    <button
                                        @click="onSubmit"
                                        class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline"
                                        type="button"
                                    >
                                        注 册
                                    </button>
                                </div>
                                <hr class="mb-6 border-t"/>
                                <div class="text-center">
                                    <router-link :to="{name:'index.login'}">
                                        <a
                                            class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
                                            href="#"
                                        >
                                            已有账号，立即登录！
                                        </a>
                                    </router-link>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    route: {name: 'index.register'},
    data() {
        return {
            form: {}
        }
    },
    methods: {
        async onSubmit() {
            await this.axios.post('register', this.form)
            this.$router.push({name: 'auth/login'})
        }
    }
}
</script>

<style scoped>

</style>
